<template>
  <teleport to="body">
    <div class="popup_wrapper">
      <div class="popup">
        <div class="popup_header">
          <span>新增图层</span>
          <i class="el-icon-close" @click="emit('close')"></i>
        </div>
        <div class="popup_body">
          <el-row :gutter="10">
            <el-col :span="4">父节点：</el-col>
            <el-col :span="20">
              <el-select v-model="layerdata.parentId" placeholder="请选择">
                <el-option
                  v-for="item in firstOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">名称：</el-col>
            <el-col :span="20">
              <el-input
                v-model="layerdata.name"
                placeholder="请输入名称"
              ></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">定位坐标：</el-col>
            <el-col :span="20">
              <el-input
                v-model="layerdata.coord"
                placeholder="(经,纬,高)示例：120.311,30.25,10000，用于展示时的相机定位"
              ></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">描述：</el-col>
            <el-col :span="20">
              <el-input
                v-model="layerdata.description"
                placeholder="请输入描述"
              ></el-input>
            </el-col>
          </el-row>
        </div>
        <div class="popup_footer">
          <el-button type="primary" @click="saveData" :loading="loading"
            >确定</el-button
          >
          <el-button type="primary" @click="emit('close')">取消</el-button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import {
  getAllLayerdata,
  getFirstDatas,
  addLayerdata,
  updateLayerdata,
  deleteLayerdata,
} from "../../../api/system.js";
import { useLayerStore } from "../../../store/layer";
import { imageFileUpload } from "../../../api/file.js";
import { ElMessage } from "element-plus";
const emit = defineEmits(["close"]);
const props = defineProps({
  geoJson: {
    type: Object,
    default: {},
  },
});
const layerStore = useLayerStore();

const loading = ref(false);
const layerdata = reactive({
  name: null,
  coord: null,
  description: null,
  parentId: null,
});
const firstOptions = ref([]);

// 获取父节点数据
getFirstDatas().then((res) => {
  console.log(res, "res");
  firstOptions.value = res.map((item) => {
    return {
      id: item.id,
      name: item.name,
    };
  });
  console.log(firstOptions.value, "firstOptions.value");
});

function getFileByJson(jsonString, fileName) {
  if (!jsonString) return;
  const content =
    typeof jsonString == "string" ? jsonString : JSON.stringify(jsonString);
  var blob = new Blob([content], {
    type: "application/json",
  });
  let file = new File([blob], fileName, {
    type: "application/json",
  });
  return file;
}

async function saveData() {
  if (!layerdata.name) {
    return ElMessage({
      message: "名称不能为空",
      type: "warning",
    });
  }
  try {
    const file = getFileByJson(props.geoJson, "markJsonData.json");
    const f = new FormData();
    f.append("file", file);
    f.append("Module", "geoJson");
    const imageData = await imageFileUpload(f);
    const res = await addLayerdata({
      name: layerdata.name,
      type: "矢量",
      typeCategory: "geojson",
      coord: layerdata.coord,
      data: imageData.path,
      description: layerdata.description,
      level: 2,
      parentId: layerdata.parentId,
      sort: 1,
      offsetData: {},
      jsonString: "",
    });
    ElMessage({
      message: "图层创建完成",
      type: "success",
    });
    emit("close");
  } catch (error) {
    console.error(error);
    ElMessage({
      message: "图层创建失败",
      type: "warning",
    });
  }
  layerStore.setTreeData();
}
</script>

<style lang="scss" scoped>
@import "../../../styles/console.scss";
</style>